<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="button-area">
      <el-button @click="handlerGoback"> 返回 </el-button>
    </div>
    <pannel-Title name="基本信息">
      <desc-base-info
        :data="info"
        :colnum-info="baseInfo"
        align="right"
        :no-line-height="true"
        label-width="120px"
      >
        <template slot="specialEnergyFlag">
          {{ info.specialEnergyFlagName }}
          <el-button
            type="text"
            size="mini"
            style="margin-left: 10px"
            @click="editInfo(1)"
            >修改类型</el-button
          >
        </template>
        <template slot="usedDeptName">
          {{ info.usedDeptName }}
          <el-button
            v-if="info.shared != 1"
            type="text"
            size="mini"
            style="margin-left: 10px"
            @click="editInfo(2)"
            >修改部门</el-button
          >
        </template>
        <template slot="direction">
          <dict-tag
            :options="dict.type.room_direction"
            :value="info.direction"
          />
        </template>
        <template slot="sharedName">
          {{ info.sharedName }}
          <el-button
            type="text"
            size="mini"
            style="margin-left: 10px"
            @click="editInfo(3)"
            >修改公摊</el-button
          >
        </template>
      </desc-base-info>
    </pannel-Title>
    <el-tabs
      v-model="activeName"
      ref="tabs"
      class="el-tabss"
      @tab-click="change"
    >
      <el-tab-pane label="人员" name="roomUser" v-if="showTab">
        <room-user ref="roomUser" :id="id"></room-user
      ></el-tab-pane>
      <el-tab-pane label="用能设备" name="device" v-if="showTab1">
        <device ref="device" :id="id"></device>
      </el-tab-pane>
      <el-tab-pane label="传感设备" name="sensingDevice" v-if="showTab2">
        <sensing-device ref="sensingDevice" :id="id"></sensing-device>
      </el-tab-pane>
    </el-tabs>

    <!-- 对话框 -->
    <el-dialog
      :title="
        type === 1
          ? '变更用能类型'
          : type === 2
          ? '变更使用部门'
          : '变更是否公摊 '
      "
      :visible.sync="show"
      width="500px"
      append-to-body
    >
      <el-form ref="editForm" :model="model" :rules="rules" label-width="100px">
        <el-form-item
          v-if="type === 1"
          label="用能类型"
          prop="specialEnergyFlag"
        >
          <el-select
            v-model="model.specialEnergyFlag"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in dict.type.special_energy_consumption_type"
              :key="item.label"
              :label="item.label"
              :value="+item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 2" label="使用部门" prop="usedDeptId">
          <CascaderSelect
            v-model="model.usedDeptId"
            :values="model.usedDeptId"
            :varient="'energy'"
            placeholder="请选择"
          ></CascaderSelect>
        </el-form-item>
        <el-form-item v-if="type === 3" label="是否公摊" prop="shared">
          <el-radio-group v-model="model.shared">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-dialog>
  </lb-layout>
</template>

<script>
import { getroomDetail, roomUserList, editroom } from "@/api/park/roommsg.js";
import CascaderSelect from "@/components/Select/CascaderSelect";
import operate from "@/views/configuration/park/roommsg/components/operate.vue";
import RoomUser from "@/views/configuration/park/roommsg/components/roomUser.vue";
import device from "./components/device.vue";
import sensingDevice from "./components/sensingDevice.vue";
import auth from "@/plugins/auth";
export default {
  name: "configuration",
  components: {
    operate,
    CascaderSelect,
    RoomUser,
    device,
    sensingDevice,
  },
  dicts: ["room_direction", "special_energy_consumption_type"],
  data() {
    return {
      type: 1,
      activeName: "roomUser",
      info: {},
      id: null,
      //弹窗
      show: false,
      model: {
        usedDeptId: "",
        specialEnergyFlag: "",
        shared: 0,
      },
      rules: {
        usedDeptId: [
          {
            required: true,
            message: "请选择使用部门",
            trigger: ["blur", "change"],
          },
        ],
        specialEnergyFlag: [
          {
            required: true,
            message: "请选择用能类型",
            trigger: ["blur", "change"],
          },
        ],
        shared: [
          {
            required: true,
            message: "请选择是否公摊",
            trigger: ["blur", "change"],
          },
        ],
      },
      userList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      showTab: false,
      showTab1: false,
      showTab2: false,
    };
  },
  computed: {
    baseInfo({ info }) {
      return [
        { label: "园区名称", prop: "parkName", colNum: 4 },
        { label: "楼宇名称", prop: "buildingName", colNum: 4 },
        {
          label: "楼层名称",
          prop: "floorName",
          colNum: 4,
        },

        {
          label: "用能类型",
          prop: "specialEnergyFlag",
          colNum: 4,
        },
        {
          label: "房间号",
          prop: "name",
          colNum: 4,
        },
        {
          label: "房间类型",
          prop: "roomTypeName",
          colNum: 4,
        },
        {
          label: "房间面积",
          prop: "roomArea",
          colNum: 4,
          unit: "㎡",
        },
        {
          label: "使用部门",
          prop: "usedDeptName",
          colNum: 4,
        },

        {
          label: "房间名称",
          prop: "nickname",
          colNum: 4,
        },
        {
          label: "总人数",
          prop: "totalUserNum",
          colNum: 4,
          unit: "人",
        },
        {
          label: "房间朝向",
          prop: "direction",
          colNum: 4,
        },
        {
          label: "是否公摊",
          prop: "sharedName",
          colNum: 4,
        },
      ];
    },
  },
  created() {
    this.id = this.$route.query.id;
    // this.requestParklist();
    // this.requestBuildinglist();
    // this.requestFloorList();
    // this.requestroomTypelist();
  },
  mounted() {
    this.judgePermi();
    setTimeout(() => {
      this.getInfo();
    }, 200);
    // this.getUserList();
  },
  methods: {
    judgePermi() {
      if (auth.hasPermi("parkManage:roomUser:config")) {
        this.showTab = true;
      } else {
        this.showTab = false;
      }
      if (auth.hasPermi("parkManage:energyDevice:config")) {
        this.showTab1 = true;
      } else {
        this.showTab1 = false;
      }
      if (auth.hasPermi("parkManage:senseDevice:config")) {
        this.showTab2 = true;
      } else {
        this.showTab2 = false;
      }
    },
    change(val) {
      const name = this.$refs.tabs.value;
      if (this.activeName === name) {
        return false;
      }
      this.$refs[this.activeName].getList();
    },
    getInfo() {
      getroomDetail(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.info = res.data;
          this.info.sharedName = res.data.shared == 1 ? "是" : "否";
          this.info.specialEnergyFlagName = res.data.specialEnergyFlag
            ? this.targatType(
                res.data.specialEnergyFlag,
                this.dict.type.special_energy_consumption_type
              )
            : "";
          this.model.specialEnergyFlag = this.info.specialEnergyFlag
            ? Number(this.info.specialEnergyFlag)
            : "";
          this.model.usedDeptId = this.info.usedDeptId
            ? this.info.usedDeptId
            : "";
          this.model.shared = this.info.shared;
          this.info.roomArea = this.info.roomArea / 100;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!404004");
        });
    },
    targatType(val, arr) {
      let info = arr.find((item) => item.value == val);
      return info.label;
    },
    editInfo(type) {
      this.type = type;
      this.show = true;
    },
    handlerGoback() {
      this.$router.go(-1);
    },
    submit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          editroom({
            usedDeptId:
              this.type == 2
                ? this.model.usedDeptId[this.model.usedDeptId.length - 1]
                : null,
            specialEnergyFlag:
              this.type == 1 ? this.model.specialEnergyFlag : null,
            shared: this.type == 3 ? this.model.shared : null,
            id: this.id,
          })
            .then((res) => {
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              this.show = false;
              this.$message.success("操作成功");
              this.getInfo();
              this.activeName = "roomUser";
              this.$refs.roomUser.getList();
            })
            .catch((err) => {
              // this.$message.error("系统错误,请联系管理员!404003");
            });
        }
      });
    },

    // 搜索
    handlerSearchDetail() {
      this.getInfo();
    },
    // 重置
    handleReset() {
      this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
    handlerDelete(row) {
      let that = this;
      let id = row.id;
      const text = "是否确认删除" + (row?.name ?? "该条数据") + "？";
      this.$modal
        .confirm(text)
        .then(() => {
          that.delectRequest(id);
        })
        .catch(() => {
          that.$message({
            message: "取消删除",
          });
        });
    },
    delectRequest(id) {
      let that = this;
      deleteRoom(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.$message.success("已删除!");
          that.handlerSearchDetail();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!403005");
        });
    },
    // 弹窗
    showModel(name, params) {
      this.modelName = name;
      this.id = params?.id || "";
      setTimeout(() => {
        this.show = true;
      }, 200);
    },
    close(status) {
      this.show = false;
      setTimeout(() => {
        if (status) this.handlerSearchDetail();
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabss {
  .el-tabs__header {
    margin: 0 !important;
  }
}
</style>
